<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="nav">
        <a href="#/home">首页</a>
        <a href="#/service">服务</a>
        <a href="#/mine">个人中心</a>
    </div>
    <div class="contant">

    </div>
</body>

</html>
<script>
    // hash路由

    //监听url地址的改变
    //思路：用hashchange事件 监听url地址中hash值的变化，只要hash值发生变化hashchange的回调函数就会执行，在回调函数内部获取最新的hash值(location.hash),使用switch或者if判断，根据不同的hash值调用不同的函数，完成内容渲染。

    window.onhashchange = function () {

        switch (location.hash) {
            case '#/home': homePage(); break
            case '#/service': servicePage(); break
            case '#/mine': minePage(); break
        }
    }
    //渲染首页的内容
    function homePage() {
        document.querySelector('.contant').innerHTML = '这是首页'

    }

    //渲染服务的内容
    function servicePage() {
        document.querySelector('.contant').innerHTML = '很高兴为您服务'
    }

    //渲染个人中心的内容
    function minePage() {
        document.querySelector('.contant').innerHTML = '个人中心'
    }
</script>